<template>
  <div class="customer-manager">
    <h1>茶道服务店 · 客户管理</h1>
    
    <!-- 客户表单 -->
    <div class="form-container">
      <h2>{{ isEditing ? '编辑客户' : '添加新客户' }}</h2>
      <form @submit.prevent="submitCustomer">
        <div class="form-group">
          <label>姓名：</label>
          <input type="text" v-model="form.name" required>
        </div>
        <div class="form-group">
          <label>电话：</label>
          <input type="tel" v-model="form.phone" required>
        </div>
        <div class="form-group">
          <label>会员等级：</label>
          <select v-model="form.level" required>
            <option value="普通会员">普通会员</option>
            <option value="白银会员">白银会员</option>
            <option value="黄金会员">黄金会员</option>
            <option value="铂金会员">铂金会员</option>
          </select>
        </div>
        <button type="submit">{{ isEditing ? '更新' : '添加' }}</button>
        <button v-if="isEditing" @click="cancelEdit">取消</button>
      </form>
    </div>

    <!-- 客户列表 -->
    <div class="customer-list">
      <h2>客户列表</h2>
      <table>
        <thead>
          <tr>
            <th>ID</th>
            <th>姓名</th>
            <th>电话</th>
            <th>会员等级</th>
            <th>创建时间</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="customer in customers" :key="customer.id">
            <td>{{ customer.id }}</td>
            <td>{{ customer.name }}</td>
            <td>{{ customer.phone }}</td>
            <td :class="customer.level">{{ customer.level }}</td>
            <td>{{ customer.createTime }}</td>
            <td>
              <button @click="editCustomer(customer)">编辑</button>
              <button @click="deleteCustomer(customer.id)">删除</button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
import axios from 'axios';

// 默认客户数据（当后端请求失败时使用）
const defaultCustomers = [
  { id: 1, name: '张三', phone: '13800138000', level: '普通会员', createTime: '2023-01-15' },
  { id: 2, name: '李四', phone: '13900139000', level: '黄金会员', createTime: '2023-02-20' },
  { id: 3, name: '王五', phone: '13700137000', level: '白银会员', createTime: '2023-03-10' }
];

export default {
  data() {
    return {
      // 客户列表
      customers: [],
      // 表单数据
      form: {
        id: null,
        name: '',
        phone: '',
        level: '普通会员'
      },
      // 编辑状态
      isEditing: false
    };
  },
  
  methods: {
    // 获取客户数据
    fetchCustomers() {
      const vm = this;
      axios.get("/api/chadao/getuser")
        .then(function(response) {
          if(response.data.code === 200){
            console.log(response.data.data);
            vm.customers = response.data.data;
          }else{
            console.error('请求失败,状态码:', response.data.code);
          }
        })
        .catch(function(error) {
          console.error('获取客户数据失败:', error);
          vm.customers = defaultCustomers;
        });
    },

    // 添加客户
    addCustomer(customer) {
      const vm = this;
      var time = new Date();
      customer.createTime = time.toLocaleString();
      console.log(customer.createTime)
      console.log("add",customer);
      axios.post('/api/chadao/adduser', customer)
        .then(function() {
          vm.fetchCustomers();
          vm.resetForm();
        })
        .catch(function(error) {
          alert('添加失败：' + error.message);
        });
    },

    // 更新客户
    updateCustomer(customer) {
      const vm = this;
      var time = new Date();
      customer.createTime = time.toLocaleString();
      console.log("update",customer);
      axios.post('/api/chadao/updateuser',customer)
        .then(function() {
          vm.fetchCustomers();
          vm.resetForm();
        })
        .catch(function(error) {
          alert('更新失败：' + error.message);
        });
    },

    // 删除客户
    deleteCustomer(id) {
      if (!confirm('确定要删除该客户吗？')) return;
      
      const vm = this;
      axios.delete(`/api/chadao/deleteuser/${id}`)
        .then(function() {
          vm.fetchCustomers();
        })
        .catch(function(error) {
          alert('删除失败：' + error.message);
        });
    },

    // 编辑客户
    editCustomer(customer) {
      Object.assign(this.form, customer);
      this.isEditing = true;
    },

    // 提交表单
    submitCustomer() {
      const { id ,name, phone, level } = this.form;
      const customerData = { id , name, phone, level };
      
      this.isEditing 
        ? this.updateCustomer(customerData)
        : this.addCustomer(customerData);
    },

    // 取消编辑
    cancelEdit() {
      this.resetForm();
      this.isEditing = false;
    },

    // 重置表单
    resetForm() {
      Object.assign(this.form, {
        id: null,
        name: '',
        phone: '',
        level: '普通会员'
      });
    }
  },
  
  mounted() {
    this.fetchCustomers();
  }
};
</script>

<style scoped>
.customer-manager {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  font-family: 'Microsoft YaHei', sans-serif;
  color: #333;
}

h1, h2 {
  color: #8d6e63;
  text-align: center;
}

.form-container {
  background: #f9f5f0;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 30px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.form-group {
  margin: 15px 0;
}

label {
  display: inline-block;
  width: 100px;
  font-weight: bold;
}

input, select {
  width: 300px;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

button {
  background-color: #a1887f;
  color: white;
  border: none;
  padding: 8px 15px;
  margin: 0 5px;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
}

button:hover {
  background-color: #8d6e63;
}

table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
}

th, td {
  border: 1px solid #e0e0e0;
  padding: 12px;
  text-align: left;
}

th {
  background-color: #d7ccc8;
  color: #5d4037;
}

tbody tr:nth-child(even) {
  background-color: #f5f5f5;
}

tbody tr:hover {
  background-color: #efebe9;
}

.普通会员 { color: #388e3c; }
.白银会员 { color: #0288d1; }
.黄金会员 { color: #f57c00; }
.铂金会员 { color: #d32f2f; }
</style>